<template>
    <div class="wrapper">
        <div style="position:sticky;top: 0;z-index: 99">
            <van-tabs v-model:active="active" color="#66d6ff" sticky>
                <van-tab :title="item.label" v-for="item in tabs" :key="item.value" />
            </van-tabs>
        </div>
        <div style="height: 10px;"></div>
        <van-cell-group inset v-if="active === 0">
            <van-field
                v-model="listBz.t0CreditCardRate"
                label="贷记卡"
                :placeholder="'区间' + listQj0.lowerRate + '%-' + listQj0.upperRate + '%'"
            >
                <template #button>%</template>
            </van-field>
            <van-field
                v-model="listBz.t1DebitCardRate"
                label="借记卡"
                :placeholder="'区间' + listQj2.lowerRate + '%-' + listQj2.upperRate + '%'"
            >
                <template #button>%</template>
            </van-field>
            <van-field v-model="listBz.ysfRate" label="扫码" :placeholder="'区间' + listQj3.lowerRate + '%-' + listQj3.upperRate + '%'">
                <template #button>%</template>
            </van-field>
            <van-field
                v-model="listBz.t0CreditCardEstreat"
                label="增收"
                v-if="listBz.t0CreditCardEstreat != null"
                :placeholder="'区间' + listQj0.lowerEstreat + '-' + listQj0.upperEstreat + ''"
            >
                <template #button>元</template>
            </van-field>
            <van-field
                v-model="listBz.manageCost"
                label="管理费(万)"
                v-if="listBz.showManageCost === 'Y'"
                :placeholder="'区间' + 0 + '-' + 3 + ''"
            ></van-field>
            <van-field
                v-if="listXh.feeType === 'DISCOUNT'"
                label="享惠"
                v-model="listXh.t0CreditCardRate"
                :placeholder="'区间' + listQj1.lowerRate + '%-' + listQj1.upperRate + '%'"
            >
                <template #button>%</template>
            </van-field>
            <van-field
                v-model="listBz.maxZfbRate"
                label="大额支付宝成本"
                :placeholder="'区间' + MAX_ZFB.lowerRate + '-' + MAX_ZFB.upperRate + ''"
            >
                <template #button>%</template>
            </van-field>
            <van-field
                v-model="listBz.t1DebitCardCapRate"
                label="借记卡封顶"
                :placeholder="'区间' + listQj4.lowerCapreat + '-' + listQj4.upperCapreat + ''"
            >
                <template #button>元</template>
            </van-field>
        </van-cell-group>
        <van-cell-group inset v-if="active === 1">
            <van-field v-model="tjLimit" v-if="canTjProfit === 'Y'" is-link readonly label="调价权限" @click="showPicker = true">
                <template #button>万</template>
            </van-field>
            <van-field v-model="tjCost" label="调价分成" v-if="canTjProfit === 'Y'" :placeholder="'区间' + lowerTjCost + '-' + upperTjCost + ''">
                <template #button>%</template>
            </van-field>
            <van-field
                v-model="incrDay"
                v-if="canTjProfit === 'Y'"
                is-link
                readonly
                label="入网限制天数"
                placeholder=""
                @click="showPickerIncr = true"
            >
                <template #button>天</template>
            </van-field>
        </van-cell-group>
        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
        <van-popup v-model:show="showPickerIncr" round position="bottom">
            <van-picker :columns="columnsIncr" @cancel="showPickerIncr = false" @confirm="onConfirmIncr" />
        </van-popup>
        <div class="btn" @click="subConfigCost" v-if="active === 0">确 认</div>
        <div class="btn" @click="saveTjConfig" v-if="active === 1">确 认</div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { configCost, costInterval, lowerAgentCost, getAgentTjProfit, configTjProfit } from '@/api/service'
import { showDialog, showToast } from 'vant'
import store from '../../store/index.js'

export default defineComponent({
    name: 'coseConfig',
    setup() {
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            agentNo: route.query.agentNo,
            listBz: {},
            listQj3: {},
            listXh: {},
            listQj2: {},
            listQj1: {},
            listQj0: {},
            listQj4: {},
            incrDay: '',
            tjCost: '',
            tjLimit: '',
            id: '',
            lowerTjCost: '',
            upperTjCost: '',
            canTjProfit: '',
            tabs: [{ label: '成本配置', value: 0 }],
            active: 0,
            columns: [],
            columnsIncr: [],
            showPicker: false,
            showPickerIncr: false,
            MAX_ZFB: {},

        })
        const getCostInterval = () => {
            console.log(1)
            costInterval({
                agentNo: state.agentNo
            }).then(res => {
                state.listQj = res.object
                res.object.forEach(item => {
                     //  支付宝大额
                     if (item.brandCode === 'MAX_ZFB') {
                        state.MAX_ZFB = item
                    }
                    //  扫码
                    if (item.brandCode === 'YSF' && item.feeType === 'STANDARD') {
                        state.listQj3 = item
                    }
                    // 贷记卡
                    if (item.cardType === 'CREDIT_CARD' && item.feeType === 'STANDARD' && item.settleCycle === 'T0') {
                        state.listQj0 = item
                    }
                    // 借记卡/借记卡封顶
                    if (item.cardType === 'DEBIT_CARD' && item.feeType === 'STANDARD' && item.settleCycle === 'T1') {
                        state.listQj2 = item
                        state.listQj4 = item
                    }
                    // 享惠
                    if (item.cardType === 'CREDIT_CARD' && item.feeType === 'DISCOUNT' && item.settleCycle === 'T0') {
                        state.listQj1 = item
                    }
                })
            })
        }
        getCostInterval()
        const getLowerAgentCost = () => {
            lowerAgentCost({ agentNo: state.agentNo }).then(res => {
                res.object.forEach(item => {
                    if (item.feeType === 'DISCOUNT') {
                        state.listXh = item
                    }
                    if (item.feeType === 'STANDARD') {
                        state.listBz = item
                    }
                })
            })
        }
        // 选中
        const onConfirm = ({ selectedOptions }) => {
            console.log(selectedOptions)
            state.tjLimit = selectedOptions[0].value
            state.showPicker = false
        }
        const onConfirmIncr = ({ selectedOptions }) => {
            console.log(selectedOptions)
            state.incrDay = selectedOptions[0].value
            state.showPickerIncr = false
        }
        // 获取调价配置
        const getTjConfig = () => {
            getAgentTjProfit({ agentNo: state.agentNo }).then(res => {
                state.lowerTjCost = res.object.interval.lowerTjCost
                state.upperTjCost = res.object.interval.upperTjCost
                state.tjCost = res.object.agentTjProfit.tjCost
                state.incrDay = res.object.agentTjProfit.incrDay
                state.tjLimit = res.object.agentTjProfit.tjLimit
                state.canTjProfit = res.object.canTjProfit
                state.id = res.object.agentTjProfit.id
                if (res.object.canTjProfit === 'Y') {
                    state.tabs.push({ label: '调价配置', value: 1 })
                }
                state.columns = res.object.interval.tjLimitList.map(item => {
                    return { text: item, value: item }
                })
                state.columnsIncr = res.object.incrDayList.map(item => {
                    return { text: item, value: item }
                })
                console.log(state.columns)
            })
        }
        getTjConfig()
        // 保存调价配置
        const saveTjConfig = () => {
            if (Number(state.tjCost) < 0) {
                showToast('调价分成不能小于' + state.lowerTjCost)
                return false
            }
            if (Number(state.tjCost) > Number(state.upperTjCost)) {
                showToast('调价分成不能大于' + state.upperTjCost)
                return false
            }
            configTjProfit({
                incrDay: state.incrDay,
                tjCost: state.tjCost,
                tjLimit: state.tjLimit,
                agentNo: state.agentNo,
                id: state.id
            }).then(res => {
                showToast('配置成功')
                setTimeout(() => {
                    router.go(-1)
                }, 1000)
            })
        }
        getLowerAgentCost()
        const subConfigCost = () => {
            if (state.listBz.t0CreditCardRate === '' || !state.listBz.t0CreditCardRate) {
                showToast('贷记卡数据不能为空')
                return false
            }
            if (state.listBz.t0CreditCardRate < state.listQj0.lowerRate) {
                showToast('贷记卡数据不能小于' + state.listQj0.lowerRate)
                return false
            }
            if (state.listBz.t0CreditCardRate > state.listQj0.upperRate) {
                showToast('贷记卡数据不能大于' + state.listQj0.upperRate)
                return false
            }
            if (state.listBz.t1DebitCardRate === '' || !state.listBz.t1DebitCardRate) {
                showToast('借记卡数据不能为空')
                return false
            }
            if (state.listBz.t1DebitCardRate < state.listQj2.lowerRate) {
                showToast('借记卡数据不能小于' + state.listQj2.lowerRate)
                return false
            }
            if (state.listBz.t1DebitCardRate > state.listQj2.upperRate) {
                showToast('借记卡数据不能大于' + state.listQj2.upperRate)
                return false
            }
            if (state.listBz.maxZfbRate < state.MAX_ZFB.lowerRate) {
                showToast('大额支付宝成本不能小于' + state.MAX_ZFB.lowerRate)
                return false
            }
            if (state.listBz.maxZfbRate > state.MAX_ZFB.upperRate) {
                showToast('大额支付宝成本不能大于' + state.MAX_ZFB.upperRate)
                return false
            }
            if (state.listBz.ysfRate === '' || !state.listBz.ysfRate) {
                showToast('扫码数据不能为空')
                return false
            }
            if (state.listBz.ysfRate < state.listQj3.lowerRate) {
                showToast('扫码数据不能小于' + state.listQj3.lowerRate)
                return false
            }
            if (state.listBz.ysfRate > state.listQj3.upperRate) {
                showToast('扫码数据不能大于' + state.listQj3.upperRate)
                return false
            }
            if (state.listBz.t1DebitCardCapRate === '' || !state.listBz.t1DebitCardCapRate) {
                showToast('借记卡封顶不能为空')
                return false
            }
            if (state.listBz.t1DebitCardCapRate < 0) {
                showToast('借记卡封顶不能小于' + 0)
                return false
            }
            if (state.listBz.t1DebitCardCapRate < state.listQj4.lowerCapreat) {
                showToast('借记卡封顶不能小于' + state.listQj4.lowerCapreat)
                return false
            }
            if (state.listBz.t1DebitCardCapRate > state.listQj4.upperCapreat) {
                showToast('借记卡封顶不能大于' + state.listQj4.upperCapreat)
                return false
            }
            if (state.listBz.manageCost > 3 || state.listBz.manageCost < 0) {
                showToast('管理费不可小于0，并且不可大于3')
                return false
            }

            let newArr = []
            // 扫码
            newArr.push({
                ...state.listBz,
                agentNo: state.agentNo,
                feeType: 'STANDARD'
            })
            if (state.listXh.feeType === 'DISCOUNT') {
                // 贷记卡
                newArr.push({
                    ...state.listXh,
                    agentNo: state.agentNo,
                    feeType: 'DISCOUNT'
                })
            }

            configCost(newArr).then(res => {
                showDialog({ message: '配置成功', confirmButtonColor: '#66d6ff' })
                setTimeout(() => {
                    router.go(-1)
                }, 1000);
            })
        }
        return {
            ...toRefs(state),
            subConfigCost,
            saveTjConfig,
            onConfirm,
            onConfirmIncr,
        }
    }
})
</script>

<style scoped lang="scss">
.wrapper {
    padding: 10px 0;
    .btn {
        width: 160px;
        height: 40px;
        background: #66d6ff;
        opacity: 1;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px auto;
        color: #ffffff;
    }
}
</style>
